import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const width = innerWidth
const height = innerHeight
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 100000)
camera.position.set(0, 3000, 2000)
camera.lookAt(0, 2500, 1000)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
const loader = new GLTFLoader()
loader.load('/city/scene.gltf', (gltf) => {
    scene.add(gltf.scene)
    renderer.render(scene, camera)
})
loader.load('/cxk/main.gltf', (gltf) => {
    scene.add(gltf.scene)
    renderer.render(scene, camera)
})
// 加载天空盒
const cubeTexture = new THREE.CubeTextureLoader().setPath('/texture/').load([
    'posx.jpg',
    'negx.jpg', //左右
    'posy.jpg',
    'negy.jpg', //上下
    'posz.jpg',
    'negz.jpg' //前后
])
// 添加背景纹理
scene.background = cubeTexture
const ambient = new THREE.AmbientLight('#ffffff', 1)
scene.add(ambient)
const axesHelper = new THREE.AxesHelper(10000)
// scene.add(axesHelper)
const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', () => {
    renderer.render(scene, camera)
})
renderer.render(scene, camera)
document.body.appendChild(renderer.domElement)
document.addEventListener('keydown', (e) => {
    switch (e.key) {
        case 'w':
            camera.position.z -= 10
            break;
        case 's':
            camera.position.z += 10
            break;
        case 'a':
            camera.position.x -= 10
            break;
        case 'd':
            camera.position.x += 10
            break;
    }
})
window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
})
function anima() {
    renderer.render(scene, camera)
    requestAnimationFrame(anima)
}
anima()
